<template>
  <div class="content-info">
    <LabelTitle text="党建引领" :showImg="false"></LabelTitle>
    <div class="sqgk-box">
      <div
        class="deviceList-ggaq"
        :class="{
          b: item.type == 'b',
          y: item.type == 'y',
          g: item.type == 'g',
        }"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="info">
          <p class="text">{{ item.title }}</p>
          <p class="num">{{ item.num || 0 }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import {getStaticData} from '@/api/jdld.js'
import { onMounted } from "vue";
const props = defineProps({
  allData: Object,
});

let list = ref([
  {
    title: "机关党组织/个",
    num: "0",
    type: "b",
  },
  {
    title: "社区党组织/个",
    num: "0",
    type: "y",
  },
  {
    title: "非公党支部/个",
    num: "0",
    type: "g",
  },
  {
    title: "机关党员/人",
    num: "0",
    type: "b",
  },
  {
    title: "社区党员/人",
    num: "0",
    type: "y",
  },
  {
    title: "志愿组织/个",
    num: "0",
    type: "g",
  },
]);


const getstaticDataFun = async () => {
  try {
    let {data} = await getStaticData(
      {
        "dataItemGroup": "党建引领"
      }
    );
    // list.value = data.dataList;
    for(let i=0;i<data.dataList.length;i++){
      list.value[i].num = data.dataList[i].dataItemValue;
    }
  } catch (e) {
    console.error("首页报错", e);
  }
};


onMounted(() => {
  getstaticDataFun();
});


</script>

<style lang="scss" scoped>
.content-info {
  width: 100%;
}
.sqgk-box {
  width: 100%;
  height: 300px;
  margin-top: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  padding: 45px 50px;
  overflow: hidden;
  display: flex;
  align-items: top;
  flex-wrap: wrap;
  justify-content: space-between;
  .deviceList-ggaq {
    width: 30%;
    height: 90px;
    margin-bottom: 30px;
    padding-left: 4px;
    // margin-right: 30px;
    &.b {
      border-left: 3px solid rgba(34, 99, 191, 1);
      .info {
        width: 100%;
        height: 100%;
        background: rgba(142, 191, 255, 0.32);
        border-radius: 0px 12px 12px 0px;
        padding: 19px 0 0 30px;
      }
      .num {
        color: rgba(34, 99, 191, 1);
      }
    }
    &.y {
      border-left: 3px solid rgba(191, 133, 34, 1);
      .info {
        width: 100%;
        height: 100%;
        background: rgba(255, 207, 142, 0.32);
        border-radius: 0px 12px 12px 0px;
        padding: 19px 0 0 30px;
      }
      .num {
        color: rgba(191, 133, 34, 1);
      }
    }
    &.g {
      border-left: 3px solid rgba(34, 191, 76, 1);
      .info {
        width: 100%;
        height: 100%;
        background: rgba(142, 255, 212, 0.32);
        border-radius: 0px 12px 12px 0px;
        padding: 19px 0 0 30px;
      }
      .num {
        color: rgba(34, 191, 76, 1);
      }
    }
    .num {
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #2263bf;
    }
    .text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 14px;
      color: #333333;
    }
  }
}
</style>
